import React, { useEffect, useRef } from 'react';
import MediaItem from '@compa/MediaItem';
import './index.css';
const tabs = [
    {
        name: '新歌',
        data: []
    },
    {
        name: '新碟',
        data: []
    },
    {
        name: '数字专辑',
        data: []
    },
]
function createSlider(slider) {
    slider.ontouchstart = function (e) {
        e.stopPropagation();
        console.log("slider touch start");
        slider.ontouchmove = function (e) {
            e.stopPropagation();
            console.log("slider move");
        }
        slider.ontouchend = function (e) {
            e.stopPropagation();
            let itemWidth = slider.firstElementChild.getBoundingClientRect().width,
                scrollLeft = slider.parentNode.scrollLeft,
                n = scrollLeft / itemWidth;
            console.log("slider end", n, Math.floor(n) + 0.4);
            if (n >= Math.floor(n) + 0.4) {
                console.log("move");
                slider.style.left = `${0 - itemWidth * (Math.floor(n) + 1)}px`;
            }
        }
    }
}
function createScrollContainer(container) {
    let slider = container.firstElementChild;
    container.onscroll = function (e) {
        let itemWidth = slider.firstElementChild.getBoundingClientRect().width;
        console.log("on scroll ", this.scrollLeft);
        let n = this.scrollLeft / itemWidth;
        console.log(n, Math.floor(n) + 0.4);
        if (n >= Math.floor(n) + 0.4) {
            console.log("move")
            slider.style.left = `${0 - itemWidth * (Math.floor(n) + 1)}px`;
        }
    }
}
const TabContainer = ({ list }) => {
    const tabItemsContainerRef = useRef();
    useEffect(() => {
        tabItemsContainerRef.current.firstChild.firstElementChild.checked = true;
        console.log(tabItemsContainerRef.current.getElementsByClassName('tab-slider'));
        let sliders = tabItemsContainerRef.current.getElementsByClassName('tab-slider'),
            containers = tabItemsContainerRef.current.getElementsByClassName('tab-content');

        createSlider(sliders[0]);
        // createScrollContainer(containers[0]);
    }, []);
    return (
        <div className="tab-container" ref={tabItemsContainerRef}>
            {
                tabs.map((t, i) => (
                    <div className="tab" key={i}>
                        <input type="radio" name="tab-radio" className="tab-radio" id={`tab-radio-${i}`} />
                        <label htmlFor={`tab-radio-${i}`} className="tab-handler">{t.name}</label>
                        <div className="tab-content">
                            <div className="tab-slider">
                                {
                                    list ? list.map((subArr, i) => (
                                        <div key={i} className="combo">
                                            {
                                                subArr.map((item, si) => (<MediaItem key={`${i}-${si}`} item={item} type={1} />))
                                            }
                                        </div>
                                    )) : (<></>)
                                }
                            </div>
                        </div>
                    </div>
                ))
            }
        </div>
    );
}

export default TabContainer;